<template>
<div v-show="diyShow">
	<div class="title">
		广告图片设置
		<span class="title-tips">图片至少添加1个，最多添加8个</span>
	</div>
	<el-form class="mt-4 w-[420px]" label-width="90px">
		<el-card class="content mb-4" shadow="never">
			<div class="sub-title">样式设置</div>
            <el-form-item label="图片高度：">
                <el-input v-model="formData.style.height" placeholder="请输入图片高度">
                    <template #append>
                        px
                    </template>
                </el-input>
                <div class="el-form-tips">请上传相同比例图片，建议尺寸：750*350</div>
            </el-form-item>
		</el-card>
		<el-card class="content mb-4" shadow="never">
			<div class="sub-title">图片设置</div>
			<div class="mb-[18px]">
				<draggable class="draggable" v-model="formData.list" animation="300" draggable=".draggable" :move="onMove">
					<template v-slot:item="{ element, index }">
						<div class="sub-item max-w-[400px] cursor-pointer" :class="{ draggable: index != 0 }">
							<div class="close-btn" @click="handleDelete(index)">
								<SvgIcon name="ele-Close" size="12" />
							</div>
							<div class="bg-fill-light w-full p-4 mt-4">
								<el-form-item label="图片：">
									<imageUpload v-model="element.image_url" :limit="1" />
								</el-form-item>
								<el-form-item label="链接地址：">
									<linkSelect v-model="element.link" :type="1" />
								</el-form-item>
							</div>
						</div>
					</template>
				</draggable>
			</div>
			<div>
				<el-form-item v-if="formData.list?.length < tabbarLimit.max" label-width="0">
					<el-button class="w-[100%]" type="primary" @click="handleAdd"> 添加图片 </el-button>
				</el-form-item>
			</div>
		</el-card>
	</el-form>
</div>
</template>

<script lang="ts" setup name="diyCenterImage">
import { ref, reactive, watch } from 'vue';
import { diyGetPersonCenter } from '/@/api/diy';
import { messageError } from '/@/utils/message';
import Draggable from 'vuedraggable';

const diyShow = ref(true);

const tabbarLimit = reactive({
	max: 8,
	min: 1,
});

const formData = reactive({
	style: {
		height: ''
	},
	list: [
		{
			image_url: '',
			link: '',
		},
	],
});

const emit = defineEmits(['getData']);

watch(
	formData,
	() => {
        emit('getData', formData);
	},
	{ immediate: true }
);

const handleAdd = () => {
	if (formData.list?.length < tabbarLimit.max) {
		formData.list.push({
			image_url: '',
			link: '',
		});
	} else {
		messageError(`图片最多添加${tabbarLimit.max}个`);
	}
};

const handleDelete = (index: number) => {
	if (formData.list?.length <= tabbarLimit.min) {
		return messageError(`图片最少保留${tabbarLimit.min}个`);
	}
	formData.list.splice(index, 1);
};

const onMove = (e: any) => {
	if (e.relatedContext.index == 0) {
		return false;
	}
	return true;
};

const getData = async () => {
	const data = await diyGetPersonCenter({ type: 1 });
    const imageData = data.data?.image;
    if (imageData) {
		for (const key in formData) {
			if (imageData[key] != null && imageData[key] != undefined) {
				formData[key] = imageData[key];
			}
		}
	}
	emit('getData', formData);
};

const setData = (imageData: any) => {
	for (const key in formData) {
		if (imageData[key] != null && imageData[key] != undefined) {
			formData[key] = imageData[key];
		}
	}
	emit('getData', formData);
};

const changeDiv = (show:boolean) => {
	diyShow.value = show;
};

defineExpose({
	getData,
	setData,
	changeDiv
});
</script>
<style lang="scss" scoped></style>
